<!DOCTYPE html>

<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>动漫人物分类识别 Demo</title>
    <link href="/static/css/user.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/static/js/jquery.min.js"></script>

</head>

<body>
    <div class="container-fluid">
        <div class="px-3 py-5">
            <div>
                <h1>动漫人物分类识别 Demo</h1>
                <p id="status">
                    正在初始化 OpenCV……
                </p>
            </div>
            <div>
                <div class="input-group mb-3">
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="fileInput"
                            aria-describedby="inputGroupFileAddon01" accept="image/*">
                        <label class="custom-file-label" for="inputGroupFile01">选择文件！</label>
                    </div>
                </div>
                <div class="control"><button id="tryIt" class="btn btn-primary" disabled>OpenCV 自动识别</button></div>
                <p class="err" id="errorMessage"></p>
                <canvas class="image_canvas" id="canvasInput" hidden></canvas>
            </div>

            <hr>
            <div class="part2" hidden>
                <div class="alert alert-primary" role="alert">
                    「自动识别」没能框出正确的人像（选择区域太大/太小/识别错误）？你可以手动框选加入。
                    <br>
                    提示：包含更多特征的面部照片识别的准确率更高。
                </div>
                <div class="canvas-box">

                </div>

                <input type="button" id="addToList" class="btn btn-primary" value="加入列表">
                <input type="button" id="clearList" class="btn btn-warning" value="清空列表">

                <input type="button" id="upload" class="btn btn-success" value="上传至服务器分析">
                <hr>
                <div id="mylist"></div>
            </div>
        </div>
    </div>

    <script src="/static/js/utils.js" type="text/javascript"></script>
    <script src="/static/js/user.js" type="text/javascript"></script>
    <script src="/static/js/zm-canvas-crop.js"></script>

    <script type="text/javascript">
        statusText = document.getElementById("status");
        tryIt = document.getElementById('tryIt');
        uploadButton = document.getElementById("upload");
        clearButton = document.getElementById("clearList");
        inputFileArea = document.getElementById("fileInput")

        uploadButton.addEventListener('click', upload);
        clearButton.addEventListener('click', clearList);
        inputFileArea.addEventListener('change', () => {
            $(".part2").removeAttr('hidden');
        })

        function upload() {
            let upload_list = document.getElementsByClassName("result_pic")
            console.log(upload_list);
            for (let i = 0; i < upload_list.length; i++) {
                let resultText = upload_list[i].parentNode.nextElementSibling.nextElementSibling
                if (resultText.innerText != "等待上传……") {
                    continue;
                } else {
                    resultText.innerText = "请等待……";
                }
                $.post("/uploadForIdent", {
                    data: upload_list[i].toDataURL('image/png')
                }, (data, status) => {
                    if (status == "success") {
                        resultText.innerText = data
                    } else {
                        resultText.innerText = "Server experiences an error. Please try again later."
                    }
                });
            }
        }

        function saveCallBack(_) {
            // make this js library happy
        }

        function clearList() {
            let list = document.getElementById("mylist");
            while (list.firstChild) {
                list.removeChild(list.firstChild);
            }
        }

        var c = new ZmCanvasCrop({
            fileInput: $('#fileInput')[0],
            saveBtn: $('#addToList')[0],
            box_width: 800,  //剪裁容器的最大宽度
            box_height: 800, //剪裁容器的最大高度
            min_width: 10,  //要剪裁图片的最小宽度
            min_height: 10  //要剪裁图片的最小高度
        });
    </script>

    <script type="text/javascript">
        let utils = new Utils('errorMessage');
        utils.addFileInputHandler('fileInput', 'canvasInput');

        tryIt.addEventListener('click', facedet);

        utils.loadOpenCv(() => {
            let faceCascadeFile = '/static/data/lbpcascade_animeface.xml';
            let faceCascadePath = 'lbpcascade_animeface.xml';
            utils.createFileFromUrl(faceCascadePath, faceCascadeFile, () => {
                tryIt.removeAttribute('disabled');
                console.log("Initialization finished");
                statusText.innerText = "OpenCV 初始化完成。"
            });


        });
    </script>
</body>

</html>